@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
    font-family: 'Xingcao';
    src:url('/mono_notes/assets/Xingcao.ttf') format('truetype');
}

@layer base {
  :root,
  html[data-theme="light"] {
    --color-fill: 251, 254, 251;
    --color-text-base: 40, 39, 40;
    --color-accent: 0, 108, 172;
    --color-card: 230, 230, 230;
    --color-card-muted: 205, 205, 205;
    --color-border: 236, 233, 233;
    --color-scroll: 255, 0, 85;
  }
  html[data-theme="dark"] {
    --color-fill: 33, 39, 55;
    --color-text-base: 234, 237, 243;
    --color-accent: 255, 107, 1;
    --color-card: 52, 63, 96;
    --color-card-muted: 138, 51, 2;
    --color-border: 171, 75, 8;
    --color-scroll: 255, 0, 85;
  }
  #sun-svg,
  html[data-theme="dark"] #moon-svg {
    display: none;
  }
  #moon-svg,
  html[data-theme="dark"] #sun-svg {
    display: block;
  }
  body {
    @apply flex min-h-screen flex-col bg-skin-fill font-mono text-skin-base 
    selection:bg-skin-accent selection:bg-opacity-70 selection:text-skin-inverted scroll-smooth;
  }
  section,
  footer {
    @apply mx-auto max-w-3xl px-4;
  }
  a {
    @apply outline-2 outline-offset-1 outline-skin-fill 
    focus-visible:no-underline focus-visible:outline-dashed;
  }
  svg {
    @apply inline-block h-6 w-6 fill-skin-base group-hover:fill-skin-accent;
  }
  .prose svg{
    @apply w-auto h-auto block m-auto;
  }

  svg.icon-tabler {
    @apply inline-block h-6 w-6 scale-125 fill-transparent 
    stroke-current stroke-2 opacity-90 group-hover:fill-transparent 
    sm:scale-110;
  }
  .prose {
    @apply prose-headings:!mb-3 prose-headings:!text-skin-base 
    prose-h3:italic prose-p:!text-skin-base 
    prose-a:!text-skin-base prose-a:!decoration-dashed prose-a:underline-offset-8
    hover:prose-a:text-skin-accent prose-blockquote:!border-l-skin-accent
    prose-blockquote:border-opacity-50 prose-blockquote:opacity-80 prose-blockquote:!text-skin-base prose-figcaption:!text-skin-base prose-figcaption:opacity-70 prose-strong:!text-skin-base

    
    prose-code:rounded prose-code:bg-skin-card 
    prose-code:bg-opacity-75 prose-code:p-1 prose-code:!text-skin-base 
    prose-code:before:!content-[''] prose-code:after:!content-['']
    prose-pre:!text-skin-base prose-ol:!text-skin-base 
    prose-ul:overflow-x-clip prose-ul:!text-skin-base prose-li:marker:!text-skin-accent
    prose-table:text-skin-base max-w-full overflow-auto prose-th:border
    prose-th:border-skin-line prose-td:border 
    prose-td:border-skin-line prose-img:mx-auto break-all
    prose-img:!mt-2 prose-img:border-2 
    prose-img:border-skin-line prose-hr:!border-skin-line;
  }

  .prose *{
    @apply text-skin-base

  }
  .prose a {
    @apply hover:!text-skin-accent;
  }
  .prose thead th:first-child,
  tbody td:first-child,
  tfoot td:first-child {
    padding-left: 0.5714286em;
  }
  .prose h2#目录 {
    @apply mb-2;
  }
  .prose details {
    @apply inline-block cursor-pointer select-none text-skin-base;
  }
  .prose summary {
    @apply focus-outline;
  }
  .prose h2#目录 + p {
    @apply hidden;
  }

  /* ===== scrollbar ===== */
  html {
    overflow-y: scroll;
  }

  /* width */
  ::-webkit-scrollbar {
    @apply w-3 h-3;
  }

  /* Track */
  ::-webkit-scrollbar-track {
    @apply bg-skin-fill;
  }

  /* Handle */
  ::-webkit-scrollbar-thumb {
    @apply bg-skin-card;
  }

  /* Handle on hover */
  ::-webkit-scrollbar-thumb:hover {
    @apply bg-skin-card-muted;
  }

  code {
    white-space: pre;
    overflow: scroll;
  }
}

@layer components {
  .display-none {
    @apply hidden;
  }
  .focus-outline {
    @apply outline-2 outline-offset-1 outline-skin-fill focus-visible:no-underline focus-visible:outline-dashed;
  }

/* https://webgradients.com/ */
  .color-warm-frame{
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  }

  .color-spring-warmth{
    background-image: linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);
  }

  .color-night-fade{
    background-image: linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);
  }

  .burning-spring{
  background-image: linear-gradient(to top, #4fb576 0%, #44c489 30%, #28a9ae 46%, #28a2b7 59%, #4c7788 71%, #6c4f63 86%, #432c39 100%);
  }
}




/* 引用 */
blockquote {
  margin: 0;
}

blockquote p {
  padding: 15px;
  border-radius: 5px;
}

blockquote p::before {
  content: '\201C';
}

blockquote p::after {
  content: '\201D';
}

blockquote footer cite{
    text-align:right;
    width: 100%;
    -webkit-text-stroke:2px;
}

blockquote footer cite::before {
  content: '----';
}

/* katex */
.katex-html{
    display:none;
}

.math.math-display{
    padding-top:1em;
}

/* 顶部framer */
.progress-bar{
    @apply top-0 backdrop-blur-3xl bg-gradient-to-r from-purple-500 to-pink-500 ;
  }

  /* 折叠 */
details {
    @apply flex flex-col w-full;
  }


details::-webkit-scrollbar {
    @apply w-0 h-0;
  }


@keyframes loadingC {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(0, 15px);
  }
  100% {
    transform: translate(0, 0);
  }
}



.xing-cao{
    font-family: "Xingcao","DM Sans", sans-serif;
}